[Update] การเชื่อมต่อ Elastic Beanstalk กับ CloudFront และทำให้เป็น HTTPS

สวัสดีครับ POP จากบริษัท Classmethod (Thailand) ครับ

ครั้งนี้จะมาแนะนำเกี่ยวกับการทำเว็บไซต์ที่สร้างด้วย Elastic Beanstalk โดยการเชื่อมต่อ Elastic Beanstalk กับ CloudFront และทำให้เป็น HTTPS ครับ

สิ่งที่ต้องมี

สร้าง Environment

※สร้าง Environment ใน Application บน Elastic Beanstalk แล้ว

สมมติว่าผมได้สร้าง Environment ใน Application เตรียมไว้แล้วโดยใช้ชื่อดังนี้
Name: tinnakorn-single.ap-southeast-1.elasticbeanstalk.com

หากยังไม่มี Environment ลองสร้างตามลิงก์ด้านล่างนี้เพื่อใช้ในการทดสอบได้ครับ

Hosted zone ใน Route 53

※สมมติว่า cmth.link ได้มีการตั้งค่าเป็น Host Zone ใน Route 53 แล้ว

ดูได้ที่ลิงก์ด้านล่างนี้

เป้าหมาย

ผมจะเชื่อมต่อ CloudFront กับ Elastic Beanstalk เพื่อทำให้เว็บไซต์เป็น HTTPS แล้วเปลี่ยน Domain name ด้วย Route 53 และขอใบรับรอง SSL Certificate เพื่อให้เว็บไซต์มีความน่าเชื่อถือในการเข้าใช้งาน

ครั้งนี้จะเปลี่ยน Domain ของ Elastic Beanstalk เป็นชื่อ Domain name ด้านล่างนี้

https://tinnakorn-single.cmth.link

สร้าง Certificate SSL

เข้ามาที่ Service AWS Certificate Manager (ACM) แล้วเปลี่ยนเป็น Region N.Virginia

คลิกที่ List certificates จากเมนูด้านซ้าย และคลิก Request

คลิก Next

การตั้งค่า Domain names ในหน้า Request public certificate:
・Fully qualified domain name: tinnakorn-single.cmth.link (ชื่ออะไรก็ได้)
・เลื่อนลงมาด้านล่างสุด คลิกปุ่ม Request

คลิกปุ่ม Reload แล้ว Domain name ที่เราสร้างจะแสดงขึ้นมา แล้วคลิกเข้าไปที่ Certificate ID ของเราได้เลย

คลิก Create records in Route 53

คลิก Create records (ในกรณีที่ไม่แสดงแบบนี้ ให้ออกไปหน้าหลักแล้วกลับเข้ามาอีกครั้ง)
เมื่อคลิกปุ่มนี้แล้ว record นี้จะถูกสร้างขึ้นใน Hosted zones ของ cmth.link ใน Route 53 ทันที

เมื่อการสร้าง Domain name เสร็จแล้ว ดูที่หัวข้อ Domains จะเห็นว่า Status เป็น ✅ Issued แบบนี้

เข้ามาที่ [Service Route 53 ＞ Hosted zones ＞ cmth.link]
แล้วดูที่หัวข้อ Records และค้นหา Record name ตาม Domain name ที่สร้างเมื่อสักครู่นี้
จะเห็นว่ามี Record name ที่เป็น Type CNAME ของเราถูกสร้างขึ้นและเป็นชื่อเหมือนกับ Domain name ใน ACM

เมื่อสร้างใบรับรอง SSL บน Certitication Manager ได้แล้วให้เปลี่ยนรีเจี้ยนกลับมาเป็น Singapore หรือรีเจี้ยนที่เรากำลังใช้งานอยู่ครับ

เชื่อมต่อ Elastic Beanstalk กับ CloudFront และทำให้เป็น HTTPS

เข้ามาที่หน้า [Service AWS Elastic Beanstalk ＞ Environments ＞ คลิก Environment ของเราใน Region ที่เราใช้งาน เช่น tinnakorn-single ใน Singapore] และคัดลอก Domain เตรียมไว้

แล้วเข้าไปที่ [Service CloudFront ＞ Distributions] และคลิก Create distribution

การตั้งค่าหน้า Create distribution

Origin

・Origin domain: [your_environment_name].ap-southeast-1.elasticbeanstalk.com (วาง Domain ของ Environment ที่นี่)
・ProtocolInfo: ◉ HTTP only

Default cache behavior

Viewer
・Viewer protocol policy: ◉ Redirect HTTP to HTTPS
・Allowed HTTP methods: ◉ GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

Cache key and origin requests
・Cache policy: CachingDisabled
・Origin request policy - optional: AllViewer

Web Application Firewall (WAF)

・เลือก Do not enable security protections

Settings

・Alternate domain name (CNAME) - optional: คลิก Add item และป้อน Domain name ที่สร้าง Certificate SSL ใน ACM เช่น tinnakorn-single.cmth.link
・Custom SSL certificate - optional: tinnakorn-single.cmth.link (เลือก Certificate ที่สร้างไว้ตอนแรก)

เลื่อนลงมาด้านล่างสุดแล้วทำตามนี้
・Description - optional: tinnakorn-single.cmth.link (จะป้อนหรือไม่ป้อนก็ได้)
・แล้วคลิก Create distribution

หมายเหตุ: การตั้งค่าที่ไม่ได้อธิบายทั้งหมดนี้จะใช้ค่าเริ่มต้น

เมื่อสร้างเสร็จแล้วรอการ Deploying สักครู่ เมื่อเสร็จแล้วสถานะ Last modified จะแสดง datetime ปัจจุบันแบบนี้
จากนั้นให้คัดลอก Distribution domain name ไปทดสอบในหน้าเว็บบราวเซอร์
ถ้าแสดงผลได้ปกติให้นำ Distribution domain name นี้ไปใช้ในการ Create record ใน Route 53 ในขั้นตอนถัดไป

สร้าง Route 53

เข้ามาที่ [Service Route 53 ＞ Hosted zones ＞ cmth.link] คลิก Create record

การตั้งค่าหัวข้อ Quick create record:
・Record name: tinnakorn-single (ป้อนชื่ออะไรก็ได้)
・Route traffic to: คลิกปุ่ม Alias เพื่อเปิดใช้งาน และเลือก Alias to CloudFront distribution
・วาง Distribution domain name ที่ Copy มาจาก Cloudfront เช่น xxxxxxxx.cloudfront.net (หากมี https:// ให้ลบออก)
・คลิก Create records

เมื่อเสร็จแล้ว ค้นหา Record name ของเรา ก็จะแสดงหน้าจอแบบนี้
ต่อไปให้คัดลอก Record name นี้เพื่อนำไปทดสอบแสดงผลในหน้าเว็บบราวเซอร์ในขั้นตอนถัดไป

ทดสอบ Record name

Record name ที่จะทดสอบคือ

https://tinnakorn-single.cmth.link/

หน้าจอนี้คือหน้าจอเริ่มต้นของ "Application code: Sample application" ใน Elastic Beanstalk

สรุป

เราสามารถเพิ่มความปลอดภัยในการใช้งานเว็บไซต์ที่ทำงานบน Elastic Beanstalk ได้โดยเชื่อมโยง Domain ของ Elastic Beanstalk ใน CloudFront และเปลี่ยนชื่อ Distribution domain name ของ CloudFront ด้วย Route 53 และ สร้าง Certificate SSL เพื่อขอใบรับรองใน AWS Certificate Manager (Region: N.Virginia เท่านั้น) ให้กับ Route 53 เมื่อทำตามวิธีดังกล่าวจะทำให้เว็บไซต์ที่สร้างด้วย Elastic Beanstalk เป็น HTTPS และมีความปลอดภัยในการใช้งานครับ

ผมหวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้อ่านได้นะครับ

POP (Tinnakorn Maneewong) จากบริษัท Classmethod (Thailand) ครับ !

บทความที่เกี่ยวข้อง

• [Update] ทดลอง Deploy Laravel ใน Elastic Beanstalk และเชื่อมต่อกับ RDS
• How To Static Website EP3: เปลี่ยนชื่อ Domain Name (ชื่อเว็บไซต์) ง่าย ๆ ด้วย Amazon Route 53 และ AWS Certificate Manager พร้อมสอนการสร้าง SSL
• การตั้งค่า Free SSL กับ DNS ใน CloudFront โดยใช้ ACM กับ Route 53